<template>
  <div :class="{'orderWrap':this.origin === 'order'}">
    <div v-if="origin === 'order'" class="waybillstyle">
      <span style="font-size: 14px">运单号 : </span>
      <el-select
        v-model="WaybillValue"
        placeholder="请选择"
        @change="WaybillSelectChanged"
        style="min-width: 230px"
      >
        <el-option
          v-for="item in WaybillListData"
          :key="item.WaybillId"
          :label="item.WaybillNo"
          :value="item.WaybillId"
        >
        </el-option>
      </el-select>
    </div>
    <div class="logistics_nodes">
      <el-timeline style="padding: 0 20px" :reverse="true">
        <el-timeline-item
          v-for="(activity, index) in nodeData"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.remark }}
          <el-tag v-if="(origin==='waybill'&&activity.is_carrier_logistics==='1')" type="warning">委外</el-tag>
          <!-- <el-button-group v-if="(origin==='node')" style="margin-left: 10px;">
            <el-button icon="el-icon-edit" @click="handleEditNode(activity)"></el-button>
            <el-button icon="el-icon-delete" @click="handleDelNode(activity)"></el-button>
          </el-button-group> -->
          <div v-if="(origin==='node'&&activity.node_time_id!=='0')" style="display: inline-block;margin-left: 5px;">
            <i class="el-icon-edit editBtn" @click="handleEditNode(activity)"></i>
            <i class="el-icon-delete editBtn" @click="handleDelNode(activity)"></i>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog title="修改信息" width="450px" :close-on-click-modal="false" v-if="visible" :modal-append-to-body="false"
        @close="hanldeClose" :visible="visible">
        <el-form :model="form" :rules="rules" label-position="left" label-width="80px" ref="ruleForm" >
            <el-form-item label="节点信息" prop="remark">
                <el-input type="textarea" autosize  v-model="form.remark" style="width:240px"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="create_time">
              <el-date-picker v-model="form.create_time" style="width:240px" type="datetime" placeholder="选择日期时间"
                value-format="timestamp">
              </el-date-picker>            
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="hanldeClose">取 消</el-button>
            <el-button type="primary" @click="handleClickSubmit">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { WaybillNodeListFn,waybillLogisticsList,waybillNodeUpdate,waybillNodeDelete } from "@/api/waybill";
import { detailWaybillList } from "@/api/orderForm";
import {
  timestamp10,
} from "@/utils/mUtils";
export default {
  name: "waybillTrack",
  components: {},
  props: ["id", "origin"],//origin waybill-运单物流节点 order-订单物流节点 node-运单节点管理
  data() {
    return {
      nodeData: [],
      WaybillListData: [],
      WaybillValue: "", //选择
      visible:false,
      form:{

      },
      rules:{
        remark: [
          { required: true, message: "请填写节点信息", trigger: "blur" },
        ],
        create_time: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
      }
    };
  },
  mounted() {
    this.getNode();
  },
  methods: {
    handleEditNode(item){
      if(!item.node_time_id){
        this.$message({
              message: "第三方信息暂不可修改！",
              type: "success",
        });
        return;
      }
      this.form={
        id:item.node_time_id,
        remark:item.remark,
        create_time:item.create_time*1000
      };
      this.visible=true
    },
    handleDelNode(item){
      if(!Number(item.node_time_id)){
        this.$message({
              message: "第三方信息暂不可删除！",
              type: "success",
        });
        return;
      }
      this.$confirm('确定要删除该节点信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        waybillNodeDelete({
          id: item.node_time_id,
        }).then(res => {
          if (res.code === 10000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getNode();
          }
        });
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // });
      });

    },
    hanldeClose(){
      this.visible = false
    },
    handleClickSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        waybillNodeUpdate({
          ...this.form,
          create_time: timestamp10(this.form.create_time)
        }).then(res => {
          if (res.code === 10000) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.hanldeClose();
            this.getNode();
          }
        });
      });
    },
    waybillListpage() {
      var param = {
        id: this.id,
      };
      detailWaybillList(param).then((res) => {
        if (res.code == "10000") {
          var res = res.data;
          if (res != null) {
            this.WaybillListData = res;
            this.WaybillValue = res[0];
            this.WaybillNode(this.WaybillValue.WaybillId);
          }
        }
      });
    },
    getNode() {
      if (this.origin === "order") {
        this.waybillListpage();
      } else {
        const Fn=this.origin === "waybill"?waybillLogisticsList:WaybillNodeListFn
        Fn({
          waybill_id: this.id,
          order_id: "",
        }).then((res) => {
          this.nodeData = res.data;
          if (res.data) {
            res.data.forEach((item) => {
              item.timestamp = this.$moment(item.create_time * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              item.remark = item.remark.replace(/[{}""]/g, "");
            });
          }
        });
      }
    },
    WaybillNode(id) {
      WaybillNodeListFn({
        waybill_id: id,
        order_id: this.id,
      }).then((res) => {
        this.nodeData = res.data;
        if (res.data) {
          res.data.forEach((item) => {
            item.timestamp = this.$moment(item.create_time * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            item.remark = item.remark.replace(/[{}""]/g, "");
          });
        }
      });
    },
    WaybillSelectChanged(value) {
      // 选中后将数据赋值給
      this.WaybillNode(value);
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  // width: 100%;
  // height: calc(100vh - 35px);
  // padding-bottom:40px ;
}
.waybillstyle {
  width: 100%;
  padding: 10px 0px 10px 20px;
}
.logistics_nodes {
  // max-height: 90vh;
  // overflow-y: scroll;
}
.editBtn{
  padding: 0 5px;
  color: #409EFF;
  cursor: pointer;
}
.orderWrap{
  height: calc(100vh - 35px);
  overflow: scroll;
  padding-bottom: 80px;
  box-sizing: border-box;
}
</style>